Video.js视频控制及进度栏标记

一、 视频控制

视频暂停

对比自己手头的网站源码和实际生成的页面后，发现源码中包含了视频地址的 <video> 标签，在实际页面中，会再生成一个子节点，视频播放控制，需要对这个子节点设置才能生效。

<!-- 实际生成的页面的源码 -->
<div id="videodis" src="video/1.mp4">
  <video id="videodis_html5_api" src="video/1.mp4"></video>
</div>

// 视频暂停代码
<script type="text/javascript">
  var videoNode = document.getElementById('videodis_html5_api');
  // http://stackoverflow.com/questions/19355952/make-html5-video-stop-at-indicated-time
  // 下面这个函数可以使视频只暂停一次
  // 常规的pause方法,只要视频播放时长超过指定时间
  // 就会一直执行暂停函数
  var pausing_function = function(){
    // currentTime 的单位为秒，有些时间属性单位为毫秒，要区分好
    if(this.currentTime >= 2) {
      this.pause();
      videoOverlay();
      // 暂停播放后，移除事件监听器
      // 否则视频播放只要超过2秒，就会一直被暂停
      this.removeEventListener("timeupdate",pausing_function);
    }
  };
  videoNode.addEventListener("timeupdate", pausing_function);
</script>

二、视频覆盖

这个功能的原理很简单，就是在视频区域再添加一个相同位置相同尺寸的同级节点，并让该节点的 z-index 属性大于视频节点的属性即可，以下只摘录关键代码：

<script type="text/javascript">
  var overlayNode = document.createElement('div');
  // 因为视频节点是普通的节点,所以直接让需要覆盖在其上的新节点宽高与其相同即可
  // clientWidth属性只有数值，所以还需手动加上 'px' 这个单位
  overlayNode.style.width = videoNode.clientWidth + 'px';
  // http://stackoverflow.com/questions/9191803/why-does-z-index-not-work
  // 只有设置了position属性的元素,z-index才能对其起作用
  overlayNode.style.position = 'relative';
  overlayNode.style.zIndex = 20;
</script>